<div
  class="inner-window animate__animated animate__fadeIn animate__faster"
  ngDraggable
  ngResizable
  [rzMinWidth]="opts.size.minWidth"
  [rzMinHeight]="opts.size.minHeight"
  [position]="opts.position"
  (endOffset)="onMoveEnd($event)"
  (rzStop)="onResizeStop($event)"
  [handle]="Handle"
  [rzHandles]="'all'"
  (started)="onFoucs($event)"
  (click)="onFoucs($event)"
  [ngClass]="{
    animate__fadeOutTopRight: isMinimize,
    animate__fadeOut: isClose,
  }"
  [ngStyle]="{
    width: opts.size.width + 'px',
    height: opts.size.height + 'px',
    'z-index': opts.zindex,
  }"
>
  <div class="header">
    <div class="title ccenter" #Handle (dblclick)="maximize()">
      {{ opts.title }}
    </div>
    <div class="btns ccenter">
      <div class="ccenter" (click)="minimize()">
        <i class="fa-light fa-minus"></i>
      </div>
      <div class="ccenter" (click)="maximize()">
        <i class="fa-light fa-square"></i>
      </div>
      <div class="ccenter" (click)="close()">
        <i class="fa-light fa-xmark"></i>
      </div>
    </div>
  </div>
  <div class="content">
    <ng-content></ng-content>
  </div>
</div>
